<template>
	<view>
		<view class="get-card flex-x-center flex-y-center" v-if="data.show_card">
    <view class="card-block">
        <image :src="data.__wxapp_img.card.top.url" style="width:630upx;height:330upx;"></image>
        <view @tap="$emit('cardDel',$event)" class="card-del flex-x-center flex-y-center">
            <image :src="data.__wxapp_img.card.del.url"></image>
        </view>
        <view class="flex-x-center">
            <view class="card-info">
                <view class="flex-x-center card-get">获得{{data.goods_card_list.length}}张卡券</view>
                <view class="flex-x-center card-one" v-if="index<1" v-for="(item,index) in data.goods_card_list" v-key="item.id">
                    <view class="card-bg">
                        <view class="card-bg-1 flex-row">
                            <view class="flex-grow-0 flex-y-center">
                                <image :src="item.pic_url" style="width:70upx;height:70upx;margin-right:32upx;"></image>
                            </view>
                            <view class="flex-grow-1 flex-y-center">
                                <view class="text-more-2">{{item.content}}</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="card-text flex-x-center">卡券将5分钟内放入您的卡包</view>
                <view @tap="$emit('cardTo',$event)" class="flex-x-center card-btn">
                    <image :src="data.__wxapp_img.card.btn.url"></image>
                </view>
            </view>
        </view>
    </view>
</view>

	</view>
</template>

<script>var myVue = {};
	export default {
		props:['data'],
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
.get-card {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2000;
    background-color: rgba(0,0,0,0.5);
}

.card-block {
    margin-top: -140upx;
    position: relative;
}

.card-info {
    width: 559upx;
    border-radius: 0 0 30upx 30upx;
    background-color: #fff;
    margin-top: -20upx;
    padding: 20upx 0 50upx 0;
}

.card-one {
    width: 100%;
    height: 164upx;
    margin-bottom: 10upx;
}

.card-bg {
    width: 514upx;
    height: 164upx;
    border-radius: 10upx;
    box-shadow: 2upx 2upx 30upx #ddd;
    padding: 14upx;
}

.card-bg-1 {
    width: 100%;
    height: 100%;
    border: 2upx #ff4544 dashed;
    border-radius: 10upx;
    padding: 0 20upx;
}

.card-del {
    position: absolute;
    right: 34upx;
    top: 224upx;
    width: 90upx;
    height: 90upx;
}

.card-del image {
    width: 30upx;
    height: 30upx;
}

.card-text {
    color: #707070;
    margin-top: 24upx;
    margin-bottom: 34upx;
    font-size: 9pt;
}

.card-text::before {
    content: ' ';
    margin-right: 32upx;
    width: 50upx;
    height: 1upx;
    background-color: #707070;
    overflow: hidden;
    margin-top: 21upx;
}

.card-text::after {
    content: ' ';
    margin-left: 32upx;
    width: 50upx;
    height: 1upx;
    background-color: #707070;
    overflow: hidden;
    margin-top: 21upx;
}

.card-btn {
    position: relative;
}

.card-btn image {
    width: 374upx;
    height: 96upx;
}

.card-get {
    margin-top: 4upx;
    margin-bottom: 20upx;
    color: #ff4544;
    font-size: 13pt;
}
</style>
